<template>
 <el-container class="wrapper">
        <el-aside width="200px">
          <div class="logo">黑马头条</div>
          <el-menu background-color="#0c7d9d" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="2" @click="$router.push('/postlist').catch(err=>{})">
              <i class="el-icon-menu"></i>
              <span slot="title">文章列表</span>
            </el-menu-item>

            <el-menu-item index="4" @click="$router.push('/editlist').catch(err=>{})">
              <i class="el-icon-edit"></i>
              <span slot="title">添加文章</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
            <el-header>
             <div class="autor">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599222035640&di=2cca70c1452cdbb9defd5b58afdd6ca7&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fsports%2Fpics%2Fhv1%2F34%2F50%2F2019%2F131298259.png" alt="">
               <span class="imautor">小帅鹏</span>
               <span class="quit" @click="quit">退出</span>
             </div>
            </el-header>
            <el-main>
              <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
  methods:{
    quit(){
      if(confirm('确定要退出吗')){
            this.$router.push('/login')
      }  
    }
  }

}
</script>

<style lang="less" scoped>
    .wrapper {
        height: 100vh;
        background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1029194327,1899266755&fm=26&gp=0.jpg');
    }
    .el-header,
    .el-footer {
        background-color: #333;
        color: #fff;
        text-align: center;
        line-height: 60px;
        position: relative;
        .autor{
          position: absolute;
          right: 45px;
          top: 0;
          display: flex;
          justify-content: center;
          align-items: center;
           img{
          width: 40px;
          height: 40px;
          border-radius: 50%;
          object-fit: cover;
        }
        .imautor{
          margin: 0 20px;
          font-size: 16px;
          color:#f2f2f2;
        }
        .quit{
          color:#f2f2f2;
          font-size: 14px;       
        }
      }
       
    }

    .el-aside {
        background-color: #0c7d9d;
        color: #fff;
        text-align: center;
        line-height: 60px;
        .el-menu {
          border-color: #000;
        }
        .logo {
          font-size: 26px;
          font-weight: bold;
        }
    }

    .el-main {
        background-color: #f2f2f2;
        color: #333;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>